---
title: Modal
description: A modal is an overlay element which blocks interaction with elements outside it.
links:
  - label: Aria docs
    href: https://react-spectrum.adobe.com/react-aria/Modal.html
  - label: Report an issue
    href: https://github.com/mehdibha/dotUI/issues/new/choose
  - label: Edit this page
    href: https://github.com/mehdibha/dotUI/tree/main/content/components/overlays/modal.mdx?plain=1
---

{/* prettier-ignore-start */}

<Alert><span className="font-bold">Note:</span> Modal only provides the overlay itself. It should be combined with Dialog to create fully accessible modal dialogs. <Link href="/docs/components/overlays/dialog">See dialog</Link> component instead.</Alert>

{/* prettier-ignore-end */}

<ComponentPreview
  name="modal/demos/basic"
  preview={`<DialogRoot>
    <Button>Open modal</Button>
    <Modal>
      <DialogContent>modal content</DialogContent>
    </Modal>
  </DialogRoot>`}
/>

## Installation

```package-install
npx shadcn@latest add @dotui/modal
```

## API Reference

| Prop                           | Type                                                                                                        | Default         | Description                                                                                                                                                                                                                                                                                                     |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `isOpen`                       | `boolean`                                                                                                   | -               | Whether the overlay is open by default (controlled).                                                                                                                                                                                                                                                            |
| `defaultOpen`                  | `boolean`                                                                                                   | -               | Whether the overlay is open by default (uncontrolled).                                                                                                                                                                                                                                                          |
| `isDismissable`                | `boolean`                                                                                                   | `false`         | Whether to close the modal when the user interacts outside it.                                                                                                                                                                                                                                                  |
| `UNSTABLE_portalContainer`     | `Element`                                                                                                   | `document.body` | The container element in which the overlay portal will be placed. This may have unknown behavior depending on where it is portalled to.                                                                                                                                                                         |
| `isKeyboardDismissDisabled`    | `boolean`                                                                                                   | `false`         | Whether pressing the escape key to close the dialog should be disabled.                                                                                                                                                                                                                                         |
| `shouldCloseOnInteractOutside` | `(element: Element) => boolean`                                                                             | -               | When user interacts with the argument element outside of the overlay ref, return `true` if `onClose` should be called. This gives you a chance to filter out interaction with elements that should not dismiss the overlay. By default, `onClose` will always be called on interaction outside the overlay ref. |
| `children`                     | `ReactNode \| (opts: ModalRenderProps) => ReactNode`                                                        | -               | The children of the component. A function may be provided to alter the children based on component state.                                                                                                                                                                                                       |
| `className`                    | `string \| (values: ModalRenderProps & {defaultClassName: string \| undefined}) => string`                  | -               | The CSS className for the element. A function may be provided to compute the class based on component state.                                                                                                                                                                                                    |
| `style`                        | `CSSProperties \| (values: ModalRenderProps & {defaultStyle: CSSProperties}) => CSSProperties \| undefined` | -               | The inline style for the element. A function may be provided to compute the style based on component state.                                                                                                                                                                                                     |

| Event          | Type                        | Description                                                   |
| -------------- | --------------------------- | ------------------------------------------------------------- |
| `onOpenChange` | `(isOpen: boolean) => void` | Handler that is called when the overlay's open state changes. |
